<template>
  <div class="website-detail-info">
    <div class="website-content-wrap">
      <!-- 顶部区域 -->
      <div class="content-top">
        <div class="left-icon-box">
          <div class="img-box">
            <img :src="websiteInfo.iconUrl" alt=""/>
          </div>
          <!-- 浏览量和访问量 -->
          <div class="views-comment-box">
            <div class="icon-box">
              <svg-icon
                  icon-name="icon-pinglun"
                  class-name="icon"
                  color="#424446"
                  size="18px"
              ></svg-icon>
              <span>{{ formatNumber(websiteInfo.commentCount) }}</span>
            </div>
            <div class="icon-box">
              <svg-icon
                  icon-name="icon-liulanliang1"
                  class-name="icon"
                  color="#424446"
                  size="18px"
              ></svg-icon>
              <span>{{ formatNumber(websiteInfo.views) }}</span>
            </div>
          </div>
        </div>
        <div class="right-link-box">
          <div class="top">
            <span class="website-type" @click="toWebsiteList(websiteInfo.topCategoryId)">{{
                websiteInfo.topCategoryName
              }}</span>
            >
            <span class="category">{{ websiteInfo.categoryName }}</span>
          </div>
          <div class="title">
            <h3>{{ websiteInfo.name }}</h3>
          </div>
          <div class="abstract">
            <p>{{ websiteInfo.introduction }}</p>
          </div>
          <!-- 标签 -->
          <div class="tags-box">
            <span>标签：</span>
            <div class="tags">
              <el-tag v-for="(item, index) in websiteInfo.tagList" :key="index">{{
                  item
                }}
              </el-tag>
            </div>
          </div>
          <div class="button-box">
            <a
                class="button"
                :href="websiteInfo.websiteLink"
                target="_blank"
                rel="noopener noreferrer"
            >
              <span>链接直达</span>
              <svg-icon
                  icon-name="icon-chakangengduo"
                  class-name="link-icon"
                  color="#fff"
                  size="18px"
              ></svg-icon>
            </a>
            <el-popover placement="bottom" :teleported="false" :width="150" trigger="hover">
              <qrcode-vue
                  :value="websiteInfo.websiteLink"
                  :size="125"
                  level="H"
                  foreground="#555"
              />
              <template #reference>
                <div
                    class="mobile-see"
                    @mouseover="handleMobilehover"
                    @mouseleave="handleMobileleave"
                >
                  <div class="mobile-button">
                    <span>手机查看</span>
                    <svg-icon
                        icon-name="icon-iconfontscan"
                        class-name="mobile-icon"
                        :color="mobileIconColor"
                        size="18px"
                    ></svg-icon>
                  </div>
                </div>
              </template>
            </el-popover>
          </div>
        </div>
      </div>
      <div class="content-bottom">
        <div class="bottom-left">
          <!-- 简介 -->
          <left-abstract :website-info="websiteInfo"></left-abstract>
          <!-- 网站快照 -->
          <website-screen
              v-if="websiteInfo.snapshotUrl"
              :website-info="websiteInfo"
          ></website-screen>
          <!-- 相关网站 -->
          <correl-website :website-list="websiteInfo.recommendWebsiteList"></correl-website>
          <!-- 评论组件 -->
          <comment-com
              width="100%"
              :biz-id="sourceId"
              biz-type="8"
          ></comment-com>
        </div>
        <div class="bottom-right">
          <!-- 同类热门 -->
          <same-recommend :website-list="websiteInfo.hotWebsiteList"></same-recommend>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {
  getWebsiteInfoAsync,
  getWebsiteListByTypeAndCategoryAsync
} from '@/http/api/websiteShare';
import {formatNumber} from '@/utils/common';
import QrcodeVue from 'qrcode.vue';
import LeftAbstract from './components/LeftAbstract.vue';
import SameRecommend from './components/SameRecommend.vue';
import CorrelWebsite from './components/CorrelWebsite.vue';
import WebsiteScreen from './components/WebsiteScreen.vue';
// 查询网站详细信息
const {sourceId} = useRoute().query;
const websiteInfo = ref<any>('');
const websiteList = ref<any>([]);
const websiteSameRecommendList = ref<any>([]);
const getWebsiteInfo = async () => {
  const params = {
    id: sourceId
  };
  const data = await getWebsiteInfoAsync(params);
  if (data.code === 200) {
    websiteInfo.value = data.data;
    // await getWebsiteListByTypeAndCategory();
    websiteList.value = data.recommendWebsiteList
    websiteSameRecommendList.value = data.hotWebsiteList
  } else {
    ElMessage.error(data.msg);
  }
};
getWebsiteInfo();

// 手机查看按钮鼠标移入
const mobileIconColor = ref<string>('#888');
const handleMobilehover = () => {
  mobileIconColor.value = '#fff';
};
const handleMobileleave = () => {
  mobileIconColor.value = '#888';
};

// 根据网站类型和分类查询出网站列表
// const page = ref<number>(1);
// const limit = ref<number>(15);
// const total = ref<number>(0);
// const currentPage = ref<number>(1);

// const getWebsiteListByTypeAndCategory = async () => {
//   let params = {
//     page: page.value,
//     limit: limit.value,
//     websiteTypeName: websiteInfo.value.website_type_name,
//     websiteCategory: websiteInfo.value.website_category
//   };
//   const data = await getWebsiteListByTypeAndCategoryAsync(params);
//   if (data.status === 200) {
//     data.data.list.forEach((item: any) => {
//       if (item._id !== websiteId) {
//         websiteList.value.push(item);
//       }
//     });
//     total.value = data.data.page.count;
//     currentPage.value = data.data.page.currentPage;
//     // 同类热门推荐
//     if (websiteList.value.length > 6) {
//       websiteSameRecommendList.value = websiteList.value.slice(0, 6);
//     } else {
//       websiteSameRecommendList.value = websiteList.value;
//     }
//   } else {
//     ElMessage.error(data.message);
//   }
// };

// 跳转到网站列表
const router = useRouter();
const toWebsiteList = (topCategoryId: string) => {
  router.push({
    path: 'website',
    query: {
      topCategoryId: topCategoryId
    }
  });
};
</script>
<style lang="scss" scoped>
.website-detail-info {
  width: 100%;
  padding: 30px 0;

  .website-content-wrap {
    width: 1200px;
    margin: 0 auto;

    .content-top {
      width: 100%;
      display: flex;
      justify-content: flex-start;

      .left-icon-box {
        width: 270px;
        height: 250px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 40px 0;
        background: #e6e8ed;
        flex-direction: column;
        overflow: hidden;
        box-shadow: 0 30px 20px -20px rgba(0, 0, 0, 0.15);
        border-radius: 10px;
        transition: background-color 0.3s;
        transition: all 0.3s;

        &:hover {
          box-shadow: 0 30px 20px -20px rgba(0, 0, 0, 0.35);
        }

        .img-box {
          width: 80px;
          height: 80px;
          background-color: rgba(255, 255, 255, 0.7);
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            max-width: 100%;
          }
        }

        .views-comment-box {
          display: flex;

          .icon-box {
            width: 48px;
            height: 48px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.8);
            margin: 0 10px;

            .icon {
              margin-bottom: 2px;
            }

            span {
              font-size: 12px;
              margin-top: 2px;
            }
          }
        }
      }

      .right-link-box {
        flex: 1;
        padding: 0 0 0 40px;

        .top {
          font-size: 13px;
          letter-spacing: 2px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          color: #636363;

          .website-type {
            padding: 4px 5px;
            background-color: #00c090;
            color: #fff;
            border-radius: 3px;
            box-sizing: border-box;
            margin-right: 5px;
            transition: all 0.3s;
            user-select: none;
            cursor: pointer;

            &:hover {
              opacity: 0.8;
            }
          }

          .category {
            margin-left: 5px;
          }
        }

        .title {
          h3 {
            font-size: 20px;
            margin: 26px 0;
            letter-spacing: 1px;
            color: #555;
          }
        }

        .abstract {
          line-height: 1.5;
          color: #1d232b;
          font-size: 14px;
          text-align: justify;
        }

        .tags-box {
          display: flex;
          align-items: center;

          span {
            font-size: 13px;
            margin-top: 20px;
            margin-right: 10px;
          }

          .el-tag {
            margin-right: 10px;
          }
        }

        .button-box {
          display: flex;
          margin-top: 30px;
          align-items: center;

          .button {
            width: 120px;
            height: 40px;
            margin-right: 30px;
            text-decoration: none; /* 去除默认的下划线 */
            outline: none;
            background-color: #00c090;
            color: #fff;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.2s;
            user-select: none;
            display: flex;
            align-items: center;
            justify-content: center;

            &:hover {
              opacity: 0.8;
            }

            span {
              margin-right: 5px;
              font-size: 14px;
              letter-spacing: 1px;
            }

            .link-icon {
              margin-left: 5px;
            }
          }

          .mobile-see {
            width: 120px;
            height: 41px;
            margin-right: 50px;
            text-decoration: none; /* 去除默认的下划线 */
            outline: none;
            background-color: rgba(138, 138, 138, 0.15);
            text-align: center;
            font-size: 16px;
            color: #888;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.2s;
            user-select: none;
            display: flex;
            align-items: center;
            justify-content: center;

            &:hover {
              background-color: rgba(138, 138, 138, 0.9);
              color: #fff;
            }

            .mobile-button {
              display: flex;
              align-items: center;
              justify-content: center;

              span {
                font-size: 14px;
                margin-right: 5px;
                letter-spacing: 1px;
              }

              .mobile-icon {
                margin-left: 5px;
              }
            }
          }
        }
      }
    }

    .content-bottom {
      display: flex;
      justify-content: space-between;
      margin-top: 30px;

      .bottom-left {
        width: 860px;
      }

      .bottom-right {
        width: 310px;
      }
    }
  }
}
</style>
